<template>
  <div>
    <div class="Hsearch">
      <div class="head rb">
        <i class="count" v-if="count >= 0">共{{ count }}条结果</i>
        <!-- <el-input
          size="mini"
          placeholder="在结果中查找"
          v-model="search"
          class="input-with-select"
          
        >
          <el-button
            size="mini"
            slot="append"
            icon="el-icon-search"
          ></el-button>
        </el-input> -->
        <i class="attrFilter row"
          ><i class="like row"
            >人气<i class="order"
              ><div class="toTop pointer after"></div>
              <div class="tobottom pointer after"></div></i
          ></i>
          <i class="row"
            >出版时间
            <i class="order"
              ><div class="toTop pointer after"></div>
              <div class="tobottom pointer after"></div
            ></i> </i
        ></i>
        <el-button
          @click="showCon = showCon == true ? false : true"
          size="mini"
          type="primary"
          >{{ showCon == true ? "关闭" : "展开" }}筛选</el-button
        >
      </div>
      <div class="main" v-if="showCon">
        <template v-for="item in HSList">
          <div class="item">
            <i class="Htext label">{{ item.name }}: </i>
            <el-input
              v-if="item.type == 'input'"
              size="mini"
              class="Hinput"
              v-model="HSearchInfo[item.vm]"
              placeholder=""
            ></el-input>
            <div class="twoprice" v-else-if="item.type == 'twoinput'">
              <template v-for="ite in item.vm">
                <el-input
                  class="priceType"
                  size="mini"
                  v-model="HSearchInfo[ite]"
                  placeholder=""
                ></el-input>
              </template>
            </div>
            <el-cascader
              size="mini"
              ref="myCascader"
              clearable
              v-else-if="item.type == 'select'"
              v-model="typeArray"
              :options="allBookTypeList"
              :props="{ expandTrigger: 'hover' }"
              @change="handleChange"
            ></el-cascader>
          </div>
        </template>
        <div class="searchButton">
          <el-button size="mini" type="primary" class="" @click="reSet()"
            >重置</el-button
          >
          <el-button size="mini" type="success" class="" @click="hadleFilter()"
            >筛选</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showCon: false,
      search: "",
      count: 0,
      typeArray: [],
      HSList: [
        {
          name: "关键字",
          type: "input",
          vm: "keyword",
        },
        {
          name: "书名",
          type: "input",
          vm: "bookName",
        },
        {
          name: "作者",
          type: "input",
          vm: "author",
        },
        {
          name: "出版社",
          type: "input",
          vm: "publisher",
        },
        {
          name: "店铺/发布者",
          type: "input",
          vm: " issuerName",
        },
        {
          name: "分类",
          type: "select",
          vm: "typeId",
        },
        {
          name: "价格",
          type: "twoinput",
          vm: ["hprice", "lprice"],
        },
        // {
        //   name: "折损",
        //   type: "input",
        //   vm: "depreciation",
        // },
      ],
      HSearchInfo: {
        bookName: "",
        author: "",
        publisher: "",
        issuerName: "",
        typeName: "",
        hprice: "",
        lprice: "",
        // depreciation: "",
        keyword: "",
        typeId: "",
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  props: ["typeId", "counts"],
  watch: {
    typeId: {
      handler(newValue) {
        // this.HSearchInfo.typeId=""
        console.log("change - typeId:", newValue);
        this.typeArray = [];
        this.$store.state.bookType.bookTypeList.secondBookTypeList.forEach(
          (item) => {
            if (newValue == item.typeId) {
              console.log("item", item);
              this.typeArray.push(item.pid);
              this.typeArray.push(item.typeId);
              console.log("this.typeArray:", this.typeArray);
            }
          }
        );
      },
      immediate: true,
    },
    counts: {
      handler(newValues) {
        this.count = newValues;
      },
    },
  },
  mounted() {
    console.log(
      "Se - typeId:",
      this.typeId,
      "--this.typeArray:",
      this.typeArray
    );
  },
  computed: {
    allBookTypeList: function () {
      return this.$store.state.bookType.bookTypeList.cascaderList;
    },
  },
  methods: {
    handleChange(value) {
      this.HSearchInfo.typeId = value[value.length - 1];
      // console.log(value);
      // console.log(this.iformInfo.typeId);
    },
    filter(push = false) {
      // console.log("HSearchInfo:", this.HSearchInfo);
      if (push) {
        ++this.HSearchInfo.pageNum;
      } else if (this.HSearchInfo.pageNum != 1) {
        this.HSearchInfo.pageNum = 1;
      }
      if (this.typeArray) {
        this.HSearchInfo.typeId = this.typeArray[this.typeArray.length - 1];
      }
      this.$store.commit("HSearchInfo/setHSearchInfo", this.HSearchInfo);
      this.$axios
        .post("index/sys/book/filterBooksByES", this.HSearchInfo)
        .then(({ data }) => {
          console.log("dataList:", data.data);
          if (data.data) {
            this.count = data.data.total;
            this.$emit("setDataList", data.data, push);
          }
        });
    },
    reSet() {
      this.HSearchInfo = {
        bookName: "",
        author: "",
        publisher: "",
        issuerName: "",
        typeName: "",
        hprice: "",
        lprice: "",
        // depreciation: "",
        keyword: "",
        typeId: "",
        pageNum: 1,
        pageSize: 10,
      };
      this.$refs.myCascader.$refs.panel.clearCheckedNodes();
    },
    hadleFilter() {
      if (this.HSearchInfo.pageNum != 1) {
        this.HSearchInfo.pageNum = 1;
      }
      this.filter();
    },
  },
};
</script>

<style lang="less" scoped>
.Hsearch {
  .head {
    margin-top: 20px;
    margin-bottom: 20px;
    padding-left: 30px;
    // .count {
    // }
    .attrFilter {
      .like {
        margin-right: 10px;
      }
      .order {
        margin-left: 2px;
        width: 10px;
        height: 18px;
        .toTop {
          height: 8px;
          margin-bottom: 2px;
          background: lightgray;
          position: relative;
        }
        .after::after {
          content: "";
          position: absolute;
          width: 4px;
          height: 4px;
          border-top: 1px solid rgb(32, 35, 38);
          border-right: 1px solid rgb(47, 53, 59);
        }
        .toTop::after {
          transform: rotate(-45deg);
          top: calc(50% - 1px);
          right: calc(50% - 2px);
        }
        .tobottom {
          height: 8px;
          background: lightgray;
          position: relative;
        }
        .tobottom::after {
          transform: rotate(135deg);
          top: calc(50% - 2px);
          right: calc(50% - 2px);
        }
      }
    }
  }
  .main {
    border-top: 1px solid lightgray;
    border-bottom: 1px solid lightgray;
    display: flex;
    flex-flow: row wrap;
    position: relative;
    font-size: 12px;
    padding-bottom: 30px;
    .item {
      margin-left: 10px;
      margin-right: 50px;
      margin-top: 10px;
      margin-bottom: 10px;
      .label {
        padding-top: 12px;
        margin-right: 10px;
        color: lightslategrey;
      }
      .el-input {
        width: 140px;
      }
      .twoprice {
        display: inline;
        .el-input {
          width: 60px;
        }
        .el-input:first-child {
          margin-right: 30px;
          position: relative;
        }
        .el-input:first-child::after {
          position: absolute;
          content: "—";
          font-weight: 700;
          transform: translateX(8px);
          margin-top: 4px;
        }
      }
      .selects {
        display: inline;
        .selectType {
          line-height: 2;
          height: 30px;
          outline: none;
          border-color: lightgrey;
        }
      }
    }
    .searchButton {
      position: absolute;
      right: 10px;
      bottom: 0;
      vertical-align: bottom;
    }
  }
}

.el-input {
  width: 230px;
}
</style>